﻿


$(function () {
echarts_1();
echarts_2();
echarts_4();
echarts_31();
echarts_32();
echarts_33();
echarts_5();
echarts_6();
function echarts_1() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('echart1'));

       option = {
  //  backgroundColor: '#00265f',
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },
    grid: {
        left: '0%',
		top:'10px',
        right: '0%',
        bottom: '4%',
       containLabel: true
    },
    xAxis: [{
        type: 'category',
        // 需要从后端获取数据
        // data: ['商超门店', '教育培训', '房地产', '生活服务', '汽车销售', '旅游酒店', '五金建材'],
        axisLine: {
            show: true,
         lineStyle: {
                color: "rgba(255,255,255,.1)",
                width: 1,
                type: "solid"
            },
        },
		
        axisTick: {
            show: false,
        },
		axisLabel:  {
                interval: 0,
               // rotate:50,
                show: true,
                splitNumber: 15,
                textStyle: {
 					color: "rgba(255,255,255,.6)",
                    fontSize: '12',
                },
            },
    }],
    yAxis: [{
        type: 'value',
        axisLabel: {
           //formatter: '{value} %'
			show:true,
			 textStyle: {
 					color: "rgba(255,255,255,.6)",
                    fontSize: '12',
                },
        },
        axisTick: {
            show: false,
        },
        axisLine: {
            show: true,
            lineStyle: {
                color: "rgba(255,255,255,.1	)",
                width: 1,
                type: "solid"
            },
        },
        splitLine: {
            lineStyle: {
               color: "rgba(255,255,255,.1)",
            }
        }
    }],
    series: [
		{
        type: 'bar',
        // 数据点
        data:[],
        // data: [200, 300, 300, 900, 1500, 1200, 600],
        barWidth:'35%', //柱子宽度
       // barGap: 1, //柱子之间间距
        itemStyle: {
            normal: {
                color:'#2f89cf',
                opacity: 1,
				barBorderRadius: 5,
            }
        }
    }

	]
};
    setInterval(function () {
        var data11 = []
        var data22 = []
        $.getJSON("http://localhost:8080/covid/getCovidGan", function (data) {
            var arr = data.data
            for (var i = 0; i < arr.length; i++) {
                data11.push(arr[i].name);
                data22.push(arr[i].value);
            }
            myChart.setOption({
                xAxis: [{
                    data: data11
                }],
                series: [{
                    data: data22
                }]

            })
        }, 2000)
    },5000)
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        window.addEventListener("resize",function(){
            myChart.resize();
        });
    }
function echarts_2() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('echart2'));
    option = {
        textStyle: {
            // color: '#00d887'          // 图例文字颜色
            color: "rgba(255,255,255,.6)",
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['电子产品', '服饰', '食品', '百货', '药品'],
            textStyle: {
                color: "#fff",
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {
            feature: {
                // saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['抖音', '快手', '京东', '淘宝', '天猫', '唯品会', '拼多多']
        },
        yAxis: {
            type: 'value'
        },
        series: [
            // name:['电子产品',]
            {
                // name: '电子产品',
                type: 'line',
                stack: 'Total',
                // data: [12, 13, 10, 13, 9, 23, 21]
            },
            {
                // name: '服饰',
                type: 'line',
                stack: 'Total',
                // data: [220, 182, 191, 234, 290, 330, 310]
            },
            {
                // name: '食品',
                type: 'line',
                stack: 'Total',
                // data: [150, 232, 201, 154, 190, 330, 410]
            },
            {
                // name: '百货',
                type: 'line',
                stack: 'Total',
                // data: [320, 332, 301, 334, 390, 330, 320]
            },
            {
                // name: '药品',
                type: 'line',
                stack: 'Total',
                // data: [820, 932, 901, 934, 1290, 1330, 1320]
            }
        ]
    };
    myChart.setOption(option);
    window.addEventListener("resize", function () {
        myChart.resize();
    });

    setInterval(function () {
        var data1 = [];
        var data2 = [];
        var data3 = [];
        var data4 = [];
        var data5 = [];
        $.getJSON("http://localhost:8080/covid/getCovidXL", function (data) {
            var arr = data.data
            var name1 = arr[0].name;
            var name2 = arr[1].name;
            var name3 = arr[2].name;
            var name4 = arr[3].name;
            var name5 = arr[4].name;

                data1.push(arr[0].抖音),
                data1.push(arr[0].快手),
                data1.push(arr[0].京东),
                data1.push(arr[0].淘宝),
                data1.push(arr[0].天猫),
                data1.push(arr[0].唯品会),
                data1.push(arr[0].拼多多),

                data2.push(arr[1].抖音),
                data2.push(arr[1].快手),
                data2.push(arr[1].京东),
                data2.push(arr[1].淘宝),
                data2.push(arr[1].天猫),
                data2.push(arr[1].唯品会),
                data2.push(arr[1].拼多多),

                data3.push(arr[2].抖音),
                data3.push(arr[2].快手),
                data3.push(arr[2].京东),
                data3.push(arr[2].淘宝),
                data3.push(arr[2].天猫),
                data3.push(arr[2].唯品会),
                data3.push(arr[2].拼多多),

                data4.push(arr[3].抖音),
                data4.push(arr[3].快手),
                data4.push(arr[3].京东),
                data4.push(arr[3].淘宝),
                data4.push(arr[3].天猫),
                data4.push(arr[3].唯品会),
                data4.push(arr[3].拼多多),

                data5.push(arr[4].抖音),
                data5.push(arr[4].快手),
                data5.push(arr[4].京东),
                data5.push(arr[4].淘宝),
                data5.push(arr[4].天猫),
                data5.push(arr[4].唯品会),
                data5.push(arr[4].拼多多),

                myChart.setOption({
                    series: [
                        {
                            name:name1,
                            data:data1
                        },
                        {
                            name:name2,
                            data: data2
                        },
                        {
                            name:name3,
                            data: data3
                        },
                        {
                            name:name4,
                            data: data4
                        },
                          {
                            name:name5,
                            data: data5
                        },
        ]
                })

        }, 2000)
    }, 5000)
}

function echarts_31() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('fb1'));
    option = {

        title: [{
            text: '年龄分布',
            left: 'center',
            textStyle: {
                color: '#fff',
                fontSize:'16'
            }

        }],
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}: {c} ({d}%)",
            position:function(p){   //其中p为当前鼠标的位置
                return [p[0] + 10, p[1] - 10];
            }
        },
        legend: {

            top:'70%',
            itemWidth: 10,
            itemHeight: 10,
            data:['20岁以下','20-29岁','30-39岁','40-49岁','50岁以上'],
            textStyle: {
                color: 'rgba(255,255,255,.5)',
                fontSize:'12',
            }
        },
        series: [
            {
                name:'年龄分布',
                type:'pie',
                center: ['50%', '42%'],
                radius: ['40%', '60%'],
                // color: ['#065aab', '#066eab', '#0682ab', '#0696ab', '#06a0ab','#06b4ab','#06c8ab','#06dcab','#06f0ab'],

                olor: ['#4ec91b',  '#41f90a', '#ee8700', '#7bc3e4','#06b4ab','#06c8ab','#06dcab','#06f0ab'],
                label: {show:false},
                labelLine: {show:false},
                // data:[
                //     {value:1, name:'20岁以下'},
                //     {value:4, name:'20-29岁'},
                //     {value:2, name:'30-39岁'},
                //     {value:2, name:'40-49岁'},
                //     {value:1, name:'50岁以上'},
                // ]
            }
        ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    window.addEventListener("resize",function(){
        myChart.resize();
    });
    setInterval(function () {
    $.getJSON("http://localhost:8080/covid/getCovidAge",function (data) {
        myChart.setOption({
            series: [{
                data: data.data
            }]

        })

    },200)
    },5000)

}
function echarts_32() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('fb2'));
    option = {

        title: [{
            text: '职业分布',
            left: 'center',
            textStyle: {
                color: '#fff',
                fontSize:'16'
            }

        }],
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}: {c} ({d}%)",
            position:function(p){   //其中p为当前鼠标的位置
                return [p[0] + 10, p[1] - 10];
            }
        },
        legend: {

            top:'70%',
            itemWidth: 10,
            itemHeight: 10,
            data:['电子商务','教育','IT/互联网','金融','学生','其他'],
            textStyle: {
                color: 'rgba(255,255,255,.5)',
                fontSize:'12',
            }
        },
        series: [
            {
                name:'年龄分布',
                type:'pie',
                center: ['50%', '42%'],
                radius: ['40%', '60%'],
                // color: ['#065aab', '#066eab', '#0682ab', '#0696ab', '#06a0ab','#06b4ab','#06c8ab','#06dcab','#06f0ab'],
                olor: ['#4ec91b',  '#41f90a', '#ee8700', '#7bc3e4','#06b4ab','#06c8ab','#06dcab','#06f0ab'],

                label: {show:false},
                labelLine: {show:false},
                // data:[
                //     {value:5, name:'电子商务'},
                //     {value:1, name:'教育'},
                //     {value:6, name:'IT/互联网'},
                //     {value:2, name:'金融'},
                //     {value:1, name:'学生'},
                //     {value:1, name:'其他'},
                // ]
            }
        ]
    };
    setInterval(function () {
        $.getJSON("http://localhost:8080/covid/getCovidZY", function (data) {
            myChart.setOption({
                series: [{
                    data: data.data
                }]

            })

        }, 2000)
    },5000)

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    window.addEventListener("resize",function(){
        myChart.resize();
    });
}
function echarts_33() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('fb3'));
    option = {
        title: [{
            text: '商品分类',
            left: 'center',
            textStyle: {
                color: '#fff',
                fontSize:'16'
            }

        }],
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}: {c} ({d}%)",
            position:function(p){   //其中p为当前鼠标的位置
                return [p[0] + 10, p[1] - 10];
            }
        },
        legend: {
            top:'70%',
            itemWidth: 10,
            itemHeight: 10,
            data:['电子产品','服饰','食品','百货','药品','其他'],
            textStyle: {
                color: 'rgba(255,255,255,.5)',
                fontSize:'12',
            }
        },
        series: [
            {
                name:'商品分类',
                type:'pie',
                center: ['50%', '42%'],
                radius: ['40%', '60%'],
                color: ['#4ec91b',  '#41f90a', '#ee8700', '#7bc3e4','#06b4ab','#06c8ab','#06dcab','#06f0ab'],

                // color: ['#065aab', '#066eab', '#0682ab', '#0696ab', '#06a0ab','#06b4ab','#06c8ab','#06dcab','#06f0ab'],
                label: {show:false},
                labelLine: {show:false},
                // data:[
                //     {value:2, name:'电子产品'},
                //     {value:3, name:'服装'},
                //     {value:1, name:'饰品'},
                //     {value:4, name:'百货'},
                //     {value:8, name:'药品'},
                //     {value:1, name:'其他'},
                // ]
            }
        ]
    };
    setInterval(function () {
        $.getJSON("http://localhost:8080/covid/getCovidShop", function (data) {
            myChart.setOption({
                series: [{
                    data: data.data
                }]
            })
        }, 2000)
    },5000)

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    window.addEventListener("resize",function(){
        myChart.resize();
    });
}

function echarts_4() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('echart4'));

        option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    lineStyle: {
                        // color: '#dddc6b'
                        color:'#fff'
                    }
                }
            },
            legend: {
                top:'0%',
                data:['收货','发货'],
                textStyle: {
                    color: 'rgba(255,255,255,.5)',

                    fontSize:'12',
                }
            },
            grid: {
                left: '10',
                top: '30',
                right: '10',
                bottom: '10',
                containLabel: true
            },

            xAxis: [{
                type: 'category',
                boundaryGap: false,
                axisLabel:  {
                    textStyle: {
                        color: "rgba(255,255,255,.6)",
                        fontSize:12,
                    },
                },
                axisLine: {
                    lineStyle: {
                        color: 'rgba(255,255,255,.2)'
                    }

                },

                // data: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24']

            }, {

                axisPointer: {show: false},
                axisLine: {  show: false},
                position: 'bottom',
                offset: 20,



            }],

            yAxis: [{
                type: 'value',
                axisTick: {show: false},
                axisLine: {
                    lineStyle: {
                        color: 'rgba(255,255,255,.1)'
                    }
                },
                axisLabel:  {
                    textStyle: {
                        color: "rgba(255,255,255,.6)",
                        fontSize:12,
                    },
                },

                splitLine: {
                    lineStyle: {
                        color: 'rgba(255,255,255,.1)'
                    }
                }
            }],
            series: [{
                    name: '收货',
                    type: 'line',
                    smooth: true,
                    symbol: 'circle',
                    symbolSize: 5,
                    showSymbol: false,
                    lineStyle: {

                        normal: {
                            color: '#0184d5',
                            width: 2
                        }
                    },
                    areaStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: 'rgba(1, 132, 213, 0.4)'
                            }, {
                                offset: 0.8,
                                color: 'rgba(1, 132, 213, 0.1)'
                            }], false),
                            shadowColor: 'rgba(0, 0, 0, 0.1)',
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: '#0184d5',
                            borderColor: 'rgba(221, 220, 107, .1)',
                            borderWidth: 12
                        }
                    },
                    // data: [3, 4, 3, 4, 3, 4, 3, 6, 2, 4, 2, 4,3, 4, 3, 4, 3, 4, 3, 6, 2, 4, 2, 4]

                },
                {
                    name: '发货',
                    type: 'line',
                    smooth: true,
                    symbol: 'circle',
                    symbolSize: 5,
                    showSymbol: false,
                    lineStyle: {

                        normal: {
                            color: '#00d887',
                            width: 2
                        }
                    },
                    areaStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: 'rgba(0, 216, 135, 0.4)'
                            }, {
                                offset: 0.8,
                                color: 'rgba(0, 216, 135, 0.1)'
                            }], false),
                            shadowColor: 'rgba(0, 0, 0, 0.1)',
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: '#00d887',
                            borderColor: 'rgba(221, 220, 107, .1)',
                            borderWidth: 12
                        }
                    },
                    // data: [5, 3, 5, 6, 1, 5, 3, 5, 6, 4, 6, 4, 8, 3, 5, 6, 1, 5, 3, 7, 2, 5, 1, 4]

                },

            ]

        };
    setInterval(function () {
        var data1 = [];
        var data2 = [];
        var data3 = [];
        $.getJSON("http://localhost:8080/covid/getCovidProvince", function (data) {
            var arr = data.data
            for (var i=0;i < arr.length;i++){
                data1.push(arr[i].province);
                data2.push(arr[i].NumS);
                data3.push(arr[i].NumF)
            }
            myChart.setOption({
                xAxis: [{
                    data:data1
                }],
                series: [{
                    data:data2
                },
                    {
                        data:data3
                    }]
            })
        }, 2000)
    },5000)
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        window.addEventListener("resize",function(){
            myChart.resize();
        });
    }
function echarts_5() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('echart5'));
    option = {
        dataset: {
            source: [
                ['score', 'amount', 'product'],
                [89.3, 58212, '甘肃'],
                [57.1, 78254, '陕西'],
                [74.4, 41032, '广州'],
                [50.1, 12755, '上海'],
                [89.7, 20145, '北京'],
                [68.1, 79146, '深圳'],
                [19.6, 91852, '天津'],
                [10.6, 101852, '山东'],
                [32.7, 20112, '好好']
            ]
        },

        textStyle: {
            color: "rgba(255,255,255,.6)",// 图例文字颜色
            },
        axisPointer:{
            type : 'shadow'
        },

        // grid: { containLabel: true },
        xAxis: { name: '' },
        yAxis: { type: 'category' },
        visualMap: {
            textStyle:{
                color:'#fff'
            },
            orient: 'horizontal',
            left: 'center',
            min: 10,
            max: 100,
            text: ['High Score', 'Low Score'],
            // Map the score column to color
            dimension: 0,
            inRange: {
                color: ['#3c466d', '#65B555', '#1b44ac']
            },
            symbolSize:11
        },
        series: [
            {
                type: 'bar',
                encode: {
                    // Map the "amount" column to X axis.
                    x: 'amount',
                    // Map the "product" column to Y axis
                    y: 'product'
                }
            }
        ]
    };
    // setInterval(function () {
    //     $.getJSON("http://localhost:8080/covid/getCovidProvinceM", function (data) {
    //
    //         myChart.setOption({
    //             dataset:[{
    //             source:
    //         }]
    //     }, 2000)
    // },5000)
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        window.addEventListener("resize",function(){
            myChart.resize();
        });
    }
function echarts_6() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('echart6'));

//         var dataStyle = {
// 	normal: {
// 		label: {
// 			show: false
// 		},
// 		labelLine: {
// 			show: false
// 		},
// 		//shadowBlur: 40,
// 		//shadowColor: 'rgba(40, 40, 40, 1)',
// 	}
// };
// var placeHolderStyle = {
// 	normal: {
// 		color: 'rgba(255,255,255,.05)',
// 		label: {show: false,},
// 		labelLine: {show: false}
// 	},
// 	emphasis: {
// 		color: 'rgba(0,0,0,0)'
// 	}
// };

        option = {
            // legend: {
            //     top: 'bottom'
            //     // color: ['#0f63d6', '#0f78d6', '#0f8cd6', '#0fa0d6', '#0fb4d6'],
            // },
            legend: {
                // top: 'bottom'
                orient :'vertical',
                right:'1',
                itemHeight :'15',
                center: ['50%', '50%'],
                // color: ['#0f63d6', '#0f78d6', '#0f8cd6', '#0fa0d6', '#0fb4d6'],
                top:'middle'

            },
            textStyle: {
                color: "rgba(255,255,255,.6)",// 图例文字颜色
                fontSize: 17
            },
            color:['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']  ,
            // toolbox: {
            //     show: true,
            //     feature: {
            //         mark: { show: true },
            //         // dataView: { show: true, readOnly: false },
            //         // restore: { show: true },
            //         // saveAsImage: { show: true }
            //     }
            // },
            series: [
                {
                    name: '平台占比',
                    type: 'pie',
                    radius: [25, 120],
                    center: ['50%', '50%'],
                    roseType: 'area',
                    itemStyle: {
                        borderRadius: 8
                    },
                    // data: [
                    //     { value: 40, name: 'ggdfg ' },
                    //     { value: 38, name: 'rose 2' },
                    //     { value: 32, name: 'rose 3' },
                    //     { value: 30, name: 'rose 4' },
                    //     { value: 28, name: 'rose 5' },
                    //     { value: 26, name: 'rose 6' },
                    //     { value: 22, name: 'rose 7' },
                    //     { value: 18, name: 'rose 8' }
                    // ]
                }
            ]
        };
    setInterval(function () {
        $.getJSON("http://localhost:8080/covid/getCovidPTNum", function (data) {
            myChart.setOption({
                series: [{
                    data: data.data
                }]
            })
        }, 2000)
    },5000)
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        window.addEventListener("resize",function(){
            myChart.resize();
        });
    }
})

		
		
		


		









